<template>
  <div class="home">
    <van-nav-bar title="收支明细" left-arrow @click-left="onClickLeft">
      <!-- <van-icon name="search" slot="right" /> -->
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-tabs type="card" v-model="active" color="#1989fa" @click="activeChange" style="margin-top: 16px">
        <!-- <van-tab title="收支明细" style="padding: 16px">
        <div style="font-size: 12px; margin-bottom: 10px">
          支出合计：￥1000元 收入合计：￥1000元
        </div>
        <div
          v-for="item in list2"
          :key="item.name"
          style="background-color: #fff"
        >
          <van-row style="padding: 16px">
            <van-col span="4">
              <van-image width="30px" height="30px" fit="cover" :src="imgUrl" />
            </van-col>
            <van-col span="14">
              <div style="margin-bottom: 6px">
                <span style="font-weight: bold; font-size: 14px">{{
                  item.title
                }}</span>
              </div>
              <div>
                <span style="font-size: 12px; line-height: 18px; color: #666">{{
                  item.desc
                }}</span>
              </div>
            </van-col>
            <van-col span="6">
              <div style="margin-bottom: 6px">
                <span
                  style="font-weight: bold; font-size: 14px; float: right"
                  >{{ item.num }}</span
                >
              </div>
            </van-col>
          </van-row>
          <div class="van-hairline--bottom"></div>
        </div>
      </van-tab> -->
        <van-tab title="收入明细" style="padding: 16px">
          <div style="font-size: 12px; margin-bottom: 10px">
            收入合计：￥{{ income }}元
          </div>
          <van-list v-model="loading" :finished="finished" :error.sync="error" error-text="请求失败，点击重新加载"
            finished-text="没有更多了" @load="onLoad">
            <div v-for="item in incomeList" :key="item.walletExpenseId" style="background-color: #fff">
              <van-form style="margin-bottom: 10px">
                <van-field readonly v-model="item.tradeNo" label="交易号" />
                <van-field readonly v-model="item.createTime" label="日期" />
                <van-field readonly v-model="item.money" label="金额" />
                <van-field readonly :value="getLabel(expenseType, item.expenseType * 1) + '-' + getLabel(tradeType, item.tradeType * 1)" label="原因" />
                <van-field readonly :value="getLabel(payStatus, item.payStatus * 1)" label="状态" />
                <van-field readonly type="textarea" rows="2" v-model="item.remark" label="备注" />
              </van-form>
            </div>
          </van-list>
        </van-tab>
        <van-tab title="支出明细" style="padding: 16px">
          <div style="font-size: 12px; margin-bottom: 10px">
            支出合计：￥{{ expend }}元
          </div>
          <van-list v-model="draftLoading" :finished="draftFinished" :error.sync="draftError" error-text="请求失败，点击重新加载"
            finished-text="没有更多了" @load="draftOnLoad">
            <div v-for="item in expendList" :key="item.name" style="background-color: #fff">
              <van-form style="margin-bottom: 10px">
                <van-field readonly v-model="item.orderNum" label="订单号" />
                <van-field readonly v-model="item.createTime" label="日期" />
                <van-field readonly v-model="item.money" label="金额" />
                <van-field readonly :value="getLabel(expenseType, item.expenseType * 1) + '-' + getLabel(tradeType, item.tradeType * 1)" label="原因" />
                <van-field readonly :value="getLabel(payStatus, item.payStatus * 1)" label="状态" />
                <van-field readonly type="textarea" rows="2" v-model="item.remark" label="备注" />
              </van-form>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script>
import imgUrl from "../../images/money.png";
import { tradeType, payStatus, expenseType } from '@/utils/options'
import { getLabel } from "@/utils/func";
export default {
  name: "home",
  data() {
    return {
      getLabel,
      tradeType,
      payStatus,
      expenseType,
      imgUrl: imgUrl,
      list2: [],
      expendList: [],
      incomeList: [],
      active: 0,
      isLoading: true,

      loading: false,
      finished: false,
      error: false,

      draftLoading: false,
      draftFinished: false,
      draftError: false,
      income: 0,
      expend: 0,
    };
  },
  methods: {
    draftOnLoad() {
      this.draftLoading = true;
      this.$get("/customer/walletexpense/list", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        expenseType: this.active + 1,
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.expendList = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.rows.length === 0 || this.expendList.length >= res.total) {
              this.draftFinished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.expendList = [...this.expendList, ...res.rows];
              this.pageNum++;
              this.draftLoading = false;
            }

          } else {
            this.draftError = true;
          }
        })
        .catch((err) => {
          this.draftError = true;
        });
    },
    getTotal() {
      this.$get("/customer/walletexpense/total")
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.income = res.data.income || 0
            this.expend = res.data.expend || 0
          }
        })
    },
    onLoad() {
      this.loading = true;
      this.$get("/customer/walletexpense/list", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        expenseType: this.active + 1,
      })
        .then((res) => {
          if (res && res.code * 1 === 200) {
            if (this.isLoading) {
              this.incomeList = [];
              this.isLoading = false;
            }
            // 数据全部加载完成
            if (res.rows.length === 0 || this.incomeList.length >= res.total) {
              this.finished = true;
            } else {
              // 将新加载的数据合并进列表数据中
              this.incomeList = [...this.incomeList, ...res.rows];
              this.pageNum++;
              this.loading = false;
            }
          } else {
            this.error = true;
          }
        })
        .catch((err) => {
          this.error = true;
        });
    },
    onRefresh() {
      if (this.active === 0) {
        this.pageNum = 1;
        this.finished = false;
        this.onLoad();
      } else if (this.active === 1) {
        this.pageNum = 1;
        this.draftFinished = false;
        this.draftOnLoad();
      } else {
        this.pageNum = 1;
        this.paidFinished = false;
        this.paidOnLoad();
      }
    },
    activeChange() {
      this.onRefresh();
    },
    onClickLeft() {
      this.$router.push("/wallet");
    },
    // getwalletexpenList() {
    //   const params = {
    //     pageNum: 1,
    //     pageSize: 10,
    //     expenseType: this.active + 1,
    //   };
    //   this.$get("/customer/walletexpense/list", params).then((res) => {
    //     if (res && res.code * 1 === 200) {
    //       this.incomeList = res.rows;
    //       this.expendList = res.rows;
    //     }
    //   });
    // },
  },
  mounted() {
    this.getTotal()
    // this.getwalletexpenList();
  },
};
</script>
<style scoped>
.home {
  background-color: #f5f5f5;
}

.title {
  margin: 1em;
  font-size: 1.5em;
}

.van-submit-bar {
  bottom: 16rem !important;
}
</style>